<template>
  <div class="home">
    <h1>Home</h1>
    <div class="main">
      <div class="main-left">
        <div class="main-left--title">
          <SubTitle :title="'Environments'">
            <template v-slot:icon>
              <img src="@/assets/logo_light.svg" alt="" style="width: 50px;">
            </template>
          </SubTitle>
          <n-button>+ Add</n-button>
        </div>
        <n-spin size="large" :show="!envds">
          <div class="main-left--cont">
            <n-carousel
                effect="card"
                prev-slide-style="transform: translateX(-150%) translateZ(-800px);"
                next-slide-style="transform: translateX(50%) translateZ(-800px);"
                style="height: 60vh;margin-top: 20px"
                :show-dots="true"
            >
              <n-carousel-item :style="{ width: '55%' }" v-for="(item) in envds" :key="item.id">
                <EnvdSlider :envd="item"></EnvdSlider>
              </n-carousel-item>
            </n-carousel>
          </div>
        </n-spin>
      </div>
      <div class="main-right">
        <div class="main-right--top">
          <SubTitle :title="'Computing Cluster'">
            <template v-slot:icon>
              <HuntingGear theme="outline" size="40" fill="#333" :strokeWidth="2"/>
            </template>
          </SubTitle>
          <ClusterStat/>
        </div>
        <div class="main-right--bottom">
          <SubTitle :title="'Jobs'">
            <template v-slot:icon>
              <ActivitySource theme="outline" size="40" fill="#333" :strokeWidth="2"/>
            </template>
          </SubTitle>
          <JobStat/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { HuntingGear,ActivitySource } from '@icon-park/vue-next'
import { NButton, NCarousel, NCarouselItem, NSpin }from 'naive-ui'
import SubTitle from '@/components/home/SubTitle'
import EnvdSlider from '@/components/home/EnvdSlider'
import ClusterStat from '@/components/home/ClusterStat'
import JobStat from '@/components/home/JobStat'
import { ref } from "vue";
import fiatBE from "@/api/fiatBE";

let envds = ref(null);

fiatBE.get('/envd/fetch').then(res => {
  res.data.map(i => {
    i.extensions = [
      {
        id: 1,
        type: "JupyterLab",
        port: "8888"
      },
      {
        id: 2,
        type: "Tensorboard",
        port: "6006"
      },
    ]
  })
  envds.value = res.data
})


</script>

<style scoped>
.home {
  padding: 0 var(--lrWhite);
}
.main {
  display: flex;
  width: 100%;
  justify-content: left;
}
.main-left {
  width: 40%;
  margin-right: 5%;
}
.main-left--title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-left--cont *{
  margin: 0 auto;
}
.main-right {
  flex: 1;
}
</style>
